<template>
  <div class="order-evaluate">
    <van-form @submit="onSubmit">
      <van-field class="direction" required name="radio" label="操作">
        <template #input>
          <van-radio-group v-model="operateForm.nextStepId" direction="horizontal" @change="handleRadio">
            <van-radio v-for="item in list" :key="item.stepId" :name="item.stepId" icon-size="16px">{{ item.stepName }}</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field v-if="operateForm.nextStepId == 'a012'" v-model="operateForm.approveMsg"
        label="处理意见" rows="2" autosize
        placeholder="请输入" type="textarea"
        maxlength="200" show-word-limit 
      />
      <div v-if="operateForm.nextStepId == 'a999'" class="evaluate-list">
        <van-field class="direction" required name="radio" label="处理结果">
          <template #input>
            <van-radio-group v-model="operateForm.result" direction="horizontal">
              <van-radio name="1" icon-size="16px">已解决</van-radio>
              <van-radio name="2" icon-size="16px">未解决</van-radio>
              <van-radio name="3" icon-size="16px">正在解决</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <div class="list-item" v-for="item in operateForm.deptScoreList" :key="item.deptId">
          <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">{{ item.deptName }}</van-divider>
          <van-field label="响应" required :rules="[{ required: true, message: '请进行评价' }]">
            <template #input>
              <van-rate v-model="item.scoreXy" size="16px" />
            </template>
          </van-field>
          <van-field label="结果" required :rules="[{ required: true, message: '请进行评价' }]">
            <template #input>
              <van-rate v-model="item.scoreJg" size="16px" />
            </template>
          </van-field>
          <van-field label="效率" required :rules="[{ required: true, message: '请进行评价' }]">
            <template #input>
              <van-rate v-model="item.scoreXl" size="16px" />
            </template>
          </van-field>
          <van-field label="态度" required :rules="[{ required: true, message: '请进行评价' }]">
            <template #input>
              <van-rate v-model="item.scoreTd" size="16px" />
            </template>
          </van-field>
          <van-field v-model="item.pjContent"
            :rules="[{ message: '当前评价存在1星，请进行说明' }]"
            :error-message="item.errorMessage"
            label="处理意见" rows="2" autosize
            placeholder="请输入" type="textarea"
            maxlength="200" show-word-limit 
          />
        </div>
      </div>
      <div class="order-save">
        <van-button type="info" text="提交" native-type="submit" block />
      </div>
    </van-form>
  </div>
</template>

<script>
import { nextStep, evaluteOrg, approveSave } from '@/api/order.js'
import { Dialog, Toast } from 'vant'

export default {
  data() {
    return {
      operateForm: {
        orderId: '',
        stepId: '',
        messageWorkitemId: '',
        processInstanceId:'',
        nextStepId: 'a999',
        nextStepName: '',
        result: '1',
        deptScoreList: [],
        approveMsg: ''
      },
      list: [],
    }
  },
  beforeDestroy() {
    Toast.clear()
  },
  mounted() {
    this.operateForm.orderId = this.$route.query.orderId
    this.operateForm.stepId = this.$route.query.stepId
    this.operateForm.messageWorkitemId = this.$route.query.messageWorkitemId
    this.operateForm.processInstanceId = this.$route.query.processInstanceId
    this.getStep()
    this.getEvaluteOrg()
  },
  methods: {
    // 获取当前可选操作
    async getStep() {
      const res = await nextStep({ stepId: this.operateForm.stepId })
      const { success, message, result } = res
      if(success) {
        this.list = result.UNI_BSS_BODY.STEP_PATH_RSP.data
        const sel = this.list.filter(item => item.stepId == this.operateForm.nextStepId)
        this.operateForm.nextStepName = sel[0].stepName
      } else {
        Dialog.alert({ message })
      }
    },
    // 选择操作按钮
    handleRadio(val) {
      this.operateForm.nextStepId = val
      const sel = this.list.filter(item => item.stepId == val)
      this.operateForm.nextStepName = sel[0].stepName
    },
    // 获取评价部门
    async getEvaluteOrg() {
      const res = await evaluteOrg({ orderId: this.operateForm.orderId })
      const { success, message, result } = res
      if(success) {
        result.map(item => {
          this.operateForm.deptScoreList.push(
            { deptName: item.orgName, deptId: item.orgCode, scoreXy: null, scoreJg: null, scoreXl: null, scoreTd: null, pjContent: '', errorMessage: '' }
          )
        })
      } else {
        Dialog.alert({ message })
      }
    },
    onSubmit() {
      this.operateForm.deptScoreList.map(item => {
        item.errorMessage = item.scoreXy == 1 || item.scoreJg == 1 || item.scoreXl == 1 || item.scoreTd == 1 ? '当前评价存在1星，请进行说明' : ''
      })
      const hasError = this.operateForm.deptScoreList.some((field) => field.errorMessage != '' && field.pjContent == '')
      if (hasError) {
        return
      }
      Dialog.confirm({
        message: '确定提交工单？',
      })
      .then(() => {
        Toast({
          type:'loading',
          duration: 0,
          message: '处理中...',
          position: 'bottom',
          forbidClick: 'true'
        })
        this.saveApprove()
      })
      .catch(() => {
        
      })
    },
    // 草稿
    async saveApprove() {
      const res = await approveSave({ ...this.operateForm })
      const { success, message } = res
      if(success) {
        this.$open.call(this, '/order/overview')
      } else {
        Dialog.alert({ message })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.order-evaluate {
  background: #ffffff;
  box-shadow: 0 2px 4px 1px #f3f7fa;
  border-radius: 6px;
  padding: 12px 8px;
  margin: 6px 8px;
  /deep/ .van-cell.direction {
    flex-direction: column;
    .van-field__control {
      justify-content: flex-end;
    }
  }
  .evaluate-list  {
    .list-item {
      border: 1px solid #1989fa;
      margin-top: 8px;
    }
  }
  .order-save {
    margin-top: 8px;
  }
}
</style>
